<template>
    <view class="wallet-message-item">
        <view class="wallet-message-item-timer">{{  props.dataItem.time ? timerfn(new Date(props.dataItem.time)) : "" }}</view>
        <view class="wallet-message-main">
            <view class="wallet-message-main-box">
                <view class="wallet-message-main-left">
                    <view class="wallet-message-main-title wallet-message-main-title-color">
                        <van-image round width="60rpx" height="60rpx" v-if="false"
                            :src="props.dataItem.content.data.UserInfo.Avatar" /><text>{{ state.msgList[props.dataItem.content.data.MsgType].text }}</text>
                    </view>
                    <view class="wallet-message-main-text">
                        <text v-if="props.dataItem.content.data.UserInfo">{{ props.dataItem.content.data.UserInfo.ShowName }} </text>{{ props.dataItem.content.data.Content }}
                    </view>
                </view>
                <view class="wallet-message-main-right">
                    <van-image fit="cover" radius="8rpx" v-if="props.dataItem.content.data.UserInfo"
                        :src="props.dataItem.content.data.UserInfo.Avatar" />
                </view>
            </view>
            <view class="wallet-message-main-bottom" @click="openDetail()">
                <text>查看详情</text>
                <img src="@/assets/image/icon91.png" />
            </view>
        </view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import {timer} from "@/utils/tool.js"
import { onLoad } from '@dcloudio/uni-app'

const props = defineProps(['dataItem'])

const state = reactive({
    show: false,
    msgList: {
        2: {
            text: '会员开通成功',
            url: '/pages/home/person/openMemberPage/index'
        },
        36: {
            text: '聊天解锁',
            url: '/pages/privateChat/index?userIMId=' + (props.dataItem.content.data.UserInfo ? props.dataItem.content.data.UserInfo.IMId : "")
        }
    }
})

const onClickLeft = () => history.back();

const timerfn = (date) => {
    return timer(date,'m-d h:m')
}

const openDetail = () => {
    let MsgType = props.dataItem.content.data.MsgType
    uni.navigateTo({
        url: state.msgList[MsgType].url
    })
}

onLoad((options) => {

})



</script>
    
<style lang="scss" scoped>
.wallet-message-item {
    margin-bottom: 30rpx;
}

.wallet-message-item-timer {
    font-size: 20rpx;
    font-weight: 500;
    color: #999999;
    text-align: center;
}

.wallet-message-main {
    padding: 36rpx 20rpx;
    background: #fff;
    margin: 20rpx 30rpx 0 30rpx;
    border-radius: 12rpx;

    .wallet-message-main-box {
        display: flex;
        justify-content: space-between;
    }

    .wallet-message-main-right {
        width: 128rpx;
        height: 128rpx;
        overflow: hidden;

        .van-image {
            width: 128rpx;
            height: 128rpx;
        }
    }

    .wallet-message-main-title {
        font-weight: bold;
        color: #333333;
        font-size: 30rpx;
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;

        .van-image {
            margin-right: 20rpx;
        }
    }

    .wallet-message-main-title-color {
        color: #f00;
    }

    .wallet-message-main-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
    }

    .wallet-message-main-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0 10rpx 0;
        margin-top: 30rpx;
        border-top: 1px solid #E7E8E9;
        color: #999;

        img {
            width: 16rpx;
            height: 30rpx;
        }
    }
}
</style>
    